<!doctype html>
<html lang="en">
    <head>
        <script>alert('WLCME TO MY PAGE--大连市第五十四1.2中学周瑞航')</script>
    <meta charset="UTF-8">
    <title>几何画板 制作：大连市第五十四中学1.2 周瑞航</title>
    <link rel="stylesheet" href="css/huaban.css">
    <script src="js/jquery.js"></script>
    <script src="js/huaban.js"></script>
    <script src="js/draw.js"></script>
</head>
<body>
    <div class="mycanvas">
        <div class="menu">
            <div class="logo"></div>
            <ul class="option">
                <li>方式</li>
                <ul class="son drawStyle">
                    <li data-role="stroke">画线</li>
                    <li data-role="fill">填充</li>
                </ul>
            </ul>
                
            <ul class="color lin-c">
                <li style="float:left">线条颜色</li>
                <input type="color" id="stroke" style=" margin-left: -20px;">
            </ul>
            <ul class="color">
                <li style="float:left">填充颜色</li>
                <input type="color" id="fill" style=" margin-left: -10px;">
                <li style="float: right">常用色</li>
            </ul>
            <div class="color-piece" >
                <div data-color="black"></div>
                <div data-color="green"></div>
                <div data-color="blue"></div>
                <div data-color="red"></div>
                <div data-color="yellow"></div>
                <div data-color="#eea236"></div>
            </div>
        </div>
        <div class="lists">
            <div data-role="pencil" class="pencil" style="border: 2px dashed red;">
                <img src="images/pencil.png" title="铅笔" alt="">
            </div>
            <div data-role="line">
                <img src="images/line.png" title="线条"alt="">
            </div>
            <div data-role="rect">
                <img src="images/square.png" title="矩形" alt="">
            </div>
            <div data-role="arc">
                <img src="images/circle.png" title="画圆" alt="">
            </div>
            <div id="save">
                <img src="images/save.png" title="保存" alt="">
            </div>
            <div id="rubber" data-role="pencil">
                <img src="images/rubber.png" title="橡皮" alt="">
            </div>
            <div id="clear">
                <img src="images/xx.png"  title="重置画布" alt="">
            </div>
            <p id="cancel">
                <img src="images/cancel.png" title="撤销"alt="">
            </p>
            <div class="lines-w">
                <img src="images/line_size_1 (1).png" alt="" title="粗细">
                <ul class="line-weight">
                    <li line-width="1"><img src="images/line_size_1.png" alt=""></li>
                    <li line-width="4"><img src="images/line_size_3.png" alt=""></li>
                    <li line-width="10"><img src="images/line_size_5.png" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="canvas" style="height: 493px; width: 95%;">
            <canvas height="493" width="1060"></canvas>
        </div>
    </div>

</body>
</html>
